<template>
    <view class="canvas-box">
        <canvas  class="canvas" :style="{width:`${canvasData.image_Width}px;`,height:`${canvasData.image_Height}px;`}" canvas-id="canvasID"></canvas>
        <view class="footer">
            <view class="preservationBtn" @click="saveImage">保存到相册</view>
        </view>
    </view>
</template>
 
<script>
	import img from '../../static/image/6.png'
    export default {
        data() {
            return {
                imgUrl: '',
                statusBarHeight: 0,
                avatar :'../../static/image/1.gif', //头像地址
				erweima:'../../static/image/6.png',//二维码
				canvasData:{
					image_Width:0,
					image_Height:0
				}
            }
        },
        onLoad() {
            let ctx = uni.createCanvasContext('canvasID', this);
			 uni.getImageInfo({
				// src: img,
				src: 'https://img0.baidu.com/it/u=3269595841,4171123021&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500', //网络图片用来做背景
				success: (res) => {
					console.log(res);
					this.canvasData.image_Width = res.width
					this.canvasData.image_Height = res.height
					ctx.save()
					ctx.drawImage(res.path, 0, 0, this.canvasData.image_Width, this.canvasData.image_Height)
					ctx.draw(true)
					ctx.save()
					this.drawCircular(ctx, this.avatar, 36, 32, 50, 50) //绘制圆形头像
					ctx.setFontSize(18)
					ctx.setFillStyle("#ffffff")
					ctx.fillText('哆啦A梦没口袋', 98, 65)
					ctx.font = '20px normal'
					ctx.setFillStyle("#09CFB1")
					ctx.fillText('伴我同行', 30, 122)
					ctx.setFillStyle("#09CFB1")
					ctx.fillText('一路前行', 60, 150)
					ctx.fillStyle = "#2C405A";
					ctx.fillRect(154,358,96,96); 
					ctx.drawImage(this.erweima, 154,356,96,96) //二维码
					ctx.draw(true, setTimeout(() => {
						uni.canvasToTempFilePath({ //将canvas生成图片
							x: 0,
							y: 0,
							width: 281,
							height: 500,
							destWidth: 281, //截取canvas的宽度
							destHeight: 500, //截取canvas的高度
							canvasId: 'canvasID',
							success:(res)=> {
								console.log('res.tempFilePath==========', res.tempFilePath)
								this.imgUrl = res.tempFilePath
							},
							fail:(err)=> {
							    console.log(err)
							}
						})
					}, 500))
				},
			})
        },
        methods: {
			//点击保存到相册
            saveImage() { 
                var _this = this;
                uni.saveImageToPhotosAlbum({
                    filePath: _this.imgUrl,
                    success() {
                      uni.showToast({
                      	title: "图片已保存图片到相册",
                      	icon: 'none',
                      	duration: 2000
                      })
                    },
					fail() {
						uni.hideLoading()
						uni.showModal({
							content: '检测到您没打开获取信息功能权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											console.log(res);
											uni.showToast({
												title: "请重新点击分享保存图片～",
												icon: "none"
											});
										}
									})
								} else {
									uni.showToast({
										title: "保存失败，请打开权限功能重试",
										icon: "none"
									});
								}
							}
						})
					}
                })
            },
            // 绘制圆形头像
             drawCircular(ctx, url, x, y, width, height) {
				//画圆形头像
				let avatarurl_width = width;
				let avatarurl_heigth = height;
				let avatarurl_x = x;
				let avatarurl_y = y;
				ctx.save(); //先保存状态，已便于画完园再用
				ctx.beginPath(); //开始绘制
				ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math
					.PI * 2, false);
				ctx.setFillStyle("#FFFFFF")
				ctx.fill() //保证图片无bug填充
				ctx.clip(); //剪切
				ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片
				ctx.restore();
			},
        }
    }
</script>
<style lang="scss">
    .canvas-box {
		display: flex;
		flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        background-color: #2C405A;
		image{
			margin-top: 40rpx;
		}
		.canvas{
			margin-top: 40rpx;
		}
        .footer {
			margin-top: 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            justify-content: center;
            .preservationBtn {
				margin-bottom: 40rpx;
                border: 1rpx solid #ffffff;
                color: #ffffff;
                display: flex;
                align-items: center;
				padding: 20rpx 40rpx;
				text-align: center;
				font-size: 30rpx;
				border-radius: 40rpx;
            }
        }
    }
</style>
			